<template>
  <el-table
    v-loading="loading"
    :data="tableData"
    stripe
    row-key="permissionId"
    @selection-change="(selection) => $emit('selection-change', selection)"
  >
    <el-table-column type="selection" align="center" />
    <el-table-column prop="permissionName" label="权限名称" />
    <el-table-column prop="permissionValue" label="权限值" align="center" width="400" />
    <el-table-column label="权限类型" align="center">
      <template slot-scope="scope">
        <el-tag>{{scope.row.permissionType === 1 ? '目录' : scope.row.permissionType === 2 ? '菜单' : '按钮'}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="权限状态" align="center">
      <template slot-scope="scope">
        <el-tag :type="scope.row.permissionStatus === 0 ? 'success' : 'info'">
          {{
          scope.row.permissionStatus === 0 ? '正常' : '禁用'
          }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="createTime" label="创建时间" align="center" />
  </el-table>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      required: true,
      default: () => []
    },
    loading: {
      type: Boolean,
      required: true,
      default: () => false
    }
  }
}
</script>

<style lang="stylus" scoped>
.el-table
  margin-top 20px
</style>
